@use '@/styles/gobal.scss' as *;

.menu {
    width: pxToRem(150);
    height: calc(100vh - pxToRem(100));
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    &__item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        &:hover {
            cursor: pointer;
        }

        &Icon {
            width: pxToRem(45);
            aspect-ratio: 1/1;
            object-fit: cover;
        }

        &Label {
            font-size: pxToRem(20);
            color: #333;

            &--active {
                color: #6da6e8;
            }
        }
    }
}